<template>
  <div class="bg-white users_container p-5">
    <div v-if="pagination.total>0">
      <PeopleInfo
        v-for="(item, index) in data"
        :key="index"
        :data="item"
        class="user_item"
      ></PeopleInfo>
      <div class="pagination" v-if="!!pagination.total">
        <ElPagination
          layout="total,prev, pager, next"
          background
          v-model:current-page="currentPage"
          :total="pagination.total"
        />
      </div>
    </div>
    <NoData v-else></NoData>
  </div>
</template>

<script lang="ts" setup>
import PeopleInfo, { FollowEntity } from '@/components/PeopleInfo.vue'
import { ElPagination } from 'element-plus'
import NoData from './NoData.vue';


const $props=defineProps({
  data:{
    type:Array<FollowEntity>,
    default:()=>([])
  },
  pagination:{
    typoe:Object,
    default:()=>({
      pageSize:10,
      pageNum:1,
      total:0
    })
  }
})

const $emit = defineEmits(['refresh'])

const currentPage = computed({
  get: () => $props.pagination.pageNum,
  set: (value) => {
    $emit('refresh', { pageNum: value })
  },
})

</script>

<style lang="scss" scoped>
.users_container {
  border-radius: 5px;

  .user_item {
    padding: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 10%);
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
